<template>
  <span
    slot="suffix"
    :class="!limitedClick ? 'code' : 'codeLimited'"
    @click="limitedClick ? '' : handleGetCode()"
    >{{ status }}</span
  >
</template>
<script>
import { onMounted, reactive, toRefs, watch, ref } from "vue";
import { ElMessage } from 'element-plus';
export default {
  props: {
    // 手机号码
    phone: {
      type: String,
      default: "",
    },
    waitTime: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    let limitedClick = ref(false);
    let state = reactive({
      status: "获取验证码",
      wait: 20,
      timer: null,
    });
    watch(
      () => props.waitTime,
      (newVal, oldVal) => {
        if (newVal) {
          clearInterval(state.timer);
          setLocalDelay(0);
          state.status = "获取验证码";
        }
      }
    );
    watch(
      () => props.phone,
      (newVal, oldVal) => {
        if (newVal) {
          console.log(newVal);
        }
      }
    );
    let time = () => {
      setLocalDelay(state.wait);
      //发送验证码的参数，从props继承电话
      let params = {
        phone: props.phone,
      };
      if (state.wait == 0) {
        setLocalDelay(state.wait);
        limitedClick.value = false;
      } else {
        state.timer = setInterval(function () {
          if (state.wait > 0) {
            state.wait -= 1;
            state.status = state.wait + "秒后获取";
            setLocalDelay(state.wait);
            limitedClick.value = true;
          } else {
            clearInterval(state.timer);
            state.status = "获取验证码";
            limitedClick.value = false;
          }
        }, 1000);
      }
    };
    const handleGetCode = () => {
      if (!props.phone) {
        ElMessage({
          message: "请先输入手机号！",
          type: "warning",
        });
        console.log("empty");
        emit("change-code", "");
      } else {
        let params = {
          phone: props.phone,
        };
        window.clearInterval(state.timer);
        state.wait = 20;
        //这里请求接口
        time();
      }
    };
    const load = () => {
      let timers = getLocalDelay();
      if (timers.lasttime == null || timers.lasttime == 0) {
        state.status = "获取验证码";
        limitedClick.value = false;
        return;
      }
      limitedClick.value = true;
      state.status = timers.lasttime + "秒后获取";
      state.timer = setInterval(function () {
        if (timers.lasttime > 0) {
          timers.lasttime -= 1;
          state.status = timers.lasttime + "秒后获取";
          setLocalDelay(timers.lasttime);
        } else {
          clearInterval(state.timer);
          state.status = "获取验证码";
        }
      }, 1000);
    };
    const getLocalDelay = () => {
      let LocalDelay = {};
      LocalDelay.lasttime = localStorage.getItem("lasttime" + location.href);
      return LocalDelay;
    };
    const setLocalDelay = (time) => {
      //location.href作为页面的唯一标识，可能一个项目中会有很多页面需要获取验证码。
      localStorage.setItem("lasttime" + location.href, time);
    };
    onMounted(() => {
      load();
    });
    return { handleGetCode, ...toRefs(state), limitedClick };
  },
};
</script>
<style lang="less" scoped>
// 可以点击的样式
.code {
  width: 122px;
  height: 70%;
  line-height: 38px;
  margin-top: 10px;
  background-color: #eaf2fd;
  letter-spacing: 1px;
  border: 1px solid #1277fe;
  border-radius: 2px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #1277fe;
  cursor: pointer;
  text-align: center;
}
// 不能点击的样式
.codeLimited {
  width: 122px;
  height: 70%;
  line-height: 38px;
  margin-top: 10px;
  background-color: #fff;
  letter-spacing: 1px;
  border: 1px dashed #666;
  border-radius: 2px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666;
  text-align: center;
}
</style>
